<template>
	<div class="home">
		<div class="banner-cont">
			<div class="base-banner" style='overflow: hidden;text-align:center'>
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="width: 100%;height: 650px;" v-for="item in bannerList">
						<!-- <img :src="item.imageUrl" alt=""> -->
						<el-image fit="contain" :src="item.imageUrl" style="width: 100%;height: 100%;"></el-image>
					</div>
				</div>
			</div>
			<div class="banner-intro">
				<div class="banner-box">
					<p class="header-top">河南省高职院校</p>
					<p class="web-headeer">信息素养大赛</p>
					<p class="subheader">主办单位：河南省高校图工委高职高专分委会</p>
				</div>
				<div class="time-cont">
					<div class="time-item" v-for="item in countInfo">
						<div class="time-title">{{item.name}}</div>
						<div class="time">
							<div class="time-num" v-for="h in item.hour">{{h}}</div>
							<div class="time-label">天</div>
							<div class="time-num" v-for="m in item.minute">{{m}}</div>
							<div class="time-label">时</div>
							<div class="time-num" v-for="s in item.second">{{s}}</div>
							<div class="time-label">分</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="notice-cont">
			<div class="notice">
				<cmp-subTitle title="新闻动态" @getmore="goPage('/News?id=2486')"></cmp-subTitle>
				<div class="notice-box">
					<div class="notice-list">
						<div class="notice-item has-shadow" @click="goDetails(2486, item.articleId)" v-for="item in newList">
							<div class="notice-item-time">
								<p class="notice-item-day">{{item.pubDate | fomateDay}}</p>
								<p class="notice-item-month">{{item.pubDate | fomateMonth}}</p>
							</div>
							<div class="notice-item-title">{{item.articleTitle}}</div>
						</div>
						<el-empty v-if="newList.length == 0" description="暂无新闻动态"></el-empty>
					</div>
					<div class="notice-swiper news-banner" style='overflow: hidden;text-align:center'>
						<div class="swiper-wrapper">
							<div class="swiper-slide" style="width: 100%;height: 480px;" v-for="item in newsBanner">
								<!-- <img src="" alt="" /> -->
								<!-- <el-image style="width: 100%; height: 100%" :src="require('../../src/assets/img/test.png')" fit="cover"> -->
								<el-image style="width: 100%; height: 100%" :src="item.titleImage" fit="contain">
									<div slot="error" class="image-slot">
										<img src="../assets/img/no_img2.png" alt="" />
									</div>
								</el-image>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="notice-cont has-bg">
			<div class="notice">
				<div class="notice-box">
					<div class="notice-list">
						<cmp-subTitle title="成员馆动态" @getmore="goPage('/Trends')"></cmp-subTitle>
						<div class="notice-bg">
							<div class="notice-item has-border" @click="goPage('/TrendsDetails?id=' + item.articleId)"
								v-for="(item, index) in memberNews">
								<div class="item-first" v-if="index == 0">
									<div class="item-img">
										<img :src="item.titleImage" alt="" />
									</div>
									<div class="item-cont">
										<div class="notice-item-title">{{item.articleTitle}}</div>
										<div class="item-time">{{item.addUser}}</div>
										<div class="item-time">{{item.pubDate}}</div>
									</div>
								</div>

								<div v-if="index!=0" class="notice-item-title">{{item.articleTitle}}</div>
							</div>
							<el-empty v-if="memberNews.length == 0" description="暂无动态"></el-empty>
						</div>

					</div>
					<div class="notice-list">
						<cmp-subTitle title="通知公告" @getmore="goPage('/News?id=2487')"></cmp-subTitle>
						<div class="notice-bg">
							<div class="bulletin-item has-border" @click="goDetails(2356, item.articleId)" v-for="item in noticeList">
								<div class="notice-item-title">{{item.articleTitle}}</div>
							</div>
							<el-empty v-if="noticeList.length == 0" description="暂无通知公告"></el-empty>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="notice-cont">
			<div class="notice">
				<div class="notice-box">
					<div class="notice-list">
						<cmp-subTitle title="大赛公告" @getmore="goPage('/ArticleList?id=2356')"></cmp-subTitle>
						<!-- 大赛公告2356  大赛风采2357 -->
						<div class="notice-bg">
							<div class="bulletin-item has-border" @click="goArticleDetails(2356, item.articleId)"
								v-for="item in competNotice">
								<div class="notice-item-title">{{item.articleTitle}}</div>
							</div>
							<el-empty v-if="competNotice.length == 0" description="暂无大赛公告"></el-empty>
						</div>

					</div>
					<div class="notice-list">
						<cmp-subTitle title="大赛风采" @getmore="goPage('/ArticleList?id=2357')"></cmp-subTitle>
						<div class="notice-bg">
							<div class="bulletin-item has-border" @click="goArticleDetails(2356, item.articleId)"
								v-for="item in competStyle">
								<div class="notice-item-title">{{item.articleTitle}}</div>
							</div>
							<el-empty v-if="competStyle.length == 0" description="暂无大赛风采"></el-empty>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="study-list">
			<cmp-subTitle align="center" :hasIcon="false" title="学习平台" @getmore="goPage('/Lesson')"></cmp-subTitle>
			<div class="study-list-cont">
				<div class="lesson-item" v-for="item in lessons" @click="goPage('/VideoIntro', {lessonId: item.lessonId})">
					<div class="lesson-img">
						<div class="lesson-tags">
							<div class="lesson-tag lesson-tag-search">信息检索</div>
							<div class="lesson-tag lesson-type-cost">公益</div>
						</div>
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="lesson-cont">
						<div class="lesson-title">{{item.lessonName}}</div>
						<div class="lesson-initro">
							<div class="lesson-types">
								<div class="types-item">实战</div>
								<div class="types-item">中级</div>
								<div class="types-item">
									<i class="el-icon-user-solid"></i>
									<span>{{item.likeNum}}</span>
								</div>
							</div>
							<div class="lesson-star">
								<el-rate></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="teacher">
			<div class="teacher-cont">
				<cmp-subTitle align="center" :hasIcon="false" title="名师展播" @getmore="goPage('/Teacher')"></cmp-subTitle>
				<div class="teacher-list" v-if="teacherList.length != 0" style='overflow: hidden;text-align:center'>
					<div class="swiper-wrapper">
						<div class="teacher-swiper-item swiper-slide" v-for="item in teacherList">
							<div class="teacher-item" v-for="i in item" @click="goPage('/TeacherIntro?id=' + i.teacherId)">
								<div class="teacher-avanar">
									<img :src="i.avatar" style="width: 100%; height: 100%" alt="" />
								</div>
								<div class="teacher-name">{{i.teacherName}}</div>
								<div class="teacher-job">{{i.teacherTitle}}</div>
								<div class="teacher-intro" v-html="i.content"></div>
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="student">
			<div class="student-cont">
				<cmp-subTitle title="成员馆风采" @getmore="goPage('/Member')"></cmp-subTitle>
				<!-- 	<div class="block-title title-center">
					<i class="title-icon"></i>
					<div class="title-name">成 / 员 / 馆 / 风 / 采</div>
					<i class="title-icon"></i>
					<div class="getMore" @click="goPage('/Member')">更多</div>
				</div> -->
			</div>
			<div class="member-list">
				<div class="member-item" @click="goPage('/MemberDetails', {id: item.recId})" v-for="item in memberList">
					<div class="member-img">
						<el-image style="width: 100%; height: 100%" :src="item.coverPhoto" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img2.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="member-title">{{item.name}}</div>
					<div class="member-address">{{item.address}}</div>
				</div>
			</div>
		</div>
		<div class="friend-link">

		</div>
	</div>
</template>

<script>
	import {
		getBannerListApi,
		homeSearchApi,
		getCountInfoApi,
		getHomeStatisticsApi,
		getPlatformApi,
		getMemberListApi,
		getMemberNewApi,
		getNewsApi,
		getNoticeListApi
	} from '@/api/home'
	import {
		getTopLessonApi,
		getGoodteacherApi
	} from '@/api/Lesson'
	import {
		getArticleTagApi,
		getArticleListApi,
	} from '@/api/Article'
	import cmpSubTitle from '@/components/cmp-subTitle'
	import Swiper from 'swiper'
	export default {
		data() {
			return {
				bannerList: [],
				countInfo: [],
				noticeList: [],
				competNotice: [],
				competStyle: [],
				statist: {},
				lessons: [],
				teacherList: [],
				platInfo: {},
				memberList: [],
				memberNews: [],
				newList: [],
				newsBanner: []
			}
		},
		created() {
			this.getBanner()
			this.getCount()
			this.getNotice()
			this.getCompetitionNotice()
			this.getCompetitionStyle()
			this.getStatistics()
			this.getLesson()
			this.getTeacher()
			this.getPlatform()
			this.getMemberList()
			this.getMemberNew()
			this.getNews()
		},
		methods: {
			getNews() {
				getNewsApi({
					pageNum: 1,
					pageSize: 6
				}).then(res => {
					let list = res.rows,
						num = Math.floor(list.length / 2)
					this.newList = list.slice(0, num)
					this.newsBanner = list.slice(num)
					console.log(this.newsBanner)
					this.$nextTick(() => {
						let newBanner = new Swiper('.news-banner', {
							watchSlidesProgress: true,
							slidesPerView: 'auto',
							autoHeight: true,
							centeredSlides: true,
							observer: true,
							observeParents: true,
							// loop: true,
							autoplay: true,
						})
					})

				})
			},
			getMemberNew() {
				getMemberNewApi({
					pageNum: 1,
					pageSize: 5
				}).then(res => {
					console.log(res, 1111)
					this.memberNews = res.rows
				})
			},
			getMemberList() {
				getMemberListApi({
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					this.memberList = res.rows
				})
			},
			getPlatform() {
				getPlatformApi().then(res => {
					this.platInfo = res.data
				})
			},
			getTeacher() {
				getGoodteacherApi().then(res => {
					let list = res.data
					let result = [];
					for (let i = 0; i < list.length; i += 10) {
						result.push(list.slice(i, i + 10));
					}
					this.teacherList = result
					this.$nextTick(() => {
						this.initTeacherSwiper()
					})
				})
			},
			initTeacherSwiper() {
				let teacherSwiper = new Swiper('.teacher-list', {

					// slidesPerView: 5,
					// grid: {
					// 	rows: 2,
					// },
					autoHeight: true,
					centeredSlides: true,
					// spaceBetween: 30,
					watchSlidesProgress: true,
					loop: true,
					autoplay: true,
				})
			},
			getLesson() {
				getTopLessonApi().then(res => {
					this.lessons = res.data
				})
			},
			getStatistics() {
				getHomeStatisticsApi().then(res => {
					this.statist = res.data
				})
			},
			getNotice() {
				getNoticeListApi({
					pageNum: 1,
					pageSize: 4
				}).then(res => {
					this.noticeList = res.rows
				})
			},
			getCompetitionNotice() {
				// 文章类--大赛公告2356  大赛风采2357 
				getArticleListApi({
					menuid: 2356,
					tagId: '',
					pageNum: 1,
					pageSize: 5
				}).then(res => {
					this.competNotice = res.rows
				})
			},
			getCompetitionStyle() {
				getArticleListApi({
					menuid: 2357,
					tagId: '',
					pageNum: 1,
					pageSize: 5
				}).then(res => {
					this.competStyle = res.rows
				})
			},
			getBanner() {
				getBannerListApi().then(res => {
					if (res.code == 200) {
						this.bannerList = res.data
						this.$nextTick(() => {
							this.bannerSwiper = new Swiper(".base-banner", {
								autoHeight: true,
								watchSlidesProgress: true,
								slidesPerView: 'auto',
								loop: true,
								autoplay: true,
							});
						})
					}
				})
			},
			getCount() {
				getCountInfoApi().then(res => {
					let data = res.data,
						arr = []
					for (let key in data) {
						let obj = {
							name: data[key].name,
							url: data[key].url,
							hour: this.getTime(data[key].time, 'hour'),
							minute: this.getTime(data[key].time, 'minute'),
							second: this.getTime(data[key].time, 'second')
						}
						arr.push(obj)
					}
					this.countInfo = arr
				})
			},
			goPage(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			},
			goDetails(type, id) {
				this.$router.push({
					path: '/NoticeDetails',
					query: {
						type: type,
						id: id
					}
				})
			},
			goArticleDetails(type, id) {
				this.$router.push({
					path: '/ArticleDetails',
					query: {
						type: type,
						id: id
					}
				})
			},

			scrollTop() {
				document.documentElement.scrollTop = 0
			},
			getTime(time, type) {
				var secondTime = parseInt(time); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) {
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取余，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 24) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 24);
						//获取小时后取余的分，获取分钟除以60取余的分
						minuteTime = parseInt(minuteTime % 24);
					}
				}
				let str = ''
				if (type == 'hour') {
					str = (hourTime > 9 ? hourTime + '' : '0' + hourTime)
				} else if (type == 'minute') {
					str = (minuteTime > 9 ? minuteTime + '' : '0' + minuteTime)
				} else if (type == 'second') {
					str = (secondTime > 9 ? secondTime + '' : '0' + secondTime)
				}
				return str
			}
		},
		filters: {
			fomateDay(val) {
				let date = new Date(val),
					dd = date.getDate()
				return dd > 9 ? dd : '0' + dd
			},
			fomateMonth(val) {
				let date = new Date(val),
					yy = date.getFullYear(),
					mm = date.getMonth() + 1,
					str = yy + '-' + (mm > 9 ? mm : '0' + mm)
				return str
			}
		},
		components: {
			cmpSubTitle
		}
	}
</script>
<style lang="less">
	@contWidth: 1400px;

	.home {
		// background-image: url(../assets/img/index_img_newsbg2.png), url(../assets/img/index_img_newsBg1.png), url(../assets/img/logo_img_bg.png);
		// background-repeat: no-repeat, no-repeat, repeat-y;
		// background-size: 4.8rem 6.79rem, 6.99rem 6.74rem, 100%;
		// background-position: left 27.16rem, right 16.7rem, left top;

		.banner-cont {
			width: 1600px;
			height: 100%;
			margin: 0 auto;
			position: relative;
		}

		.banner-intro {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 99;
			width: @contWidth;
			height: 100%;
			display: flex;
			justify-content: space-between;
			padding-top: 53px;
		}

		.time-cont {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 436px;
			height: 440px;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 10px;
			padding: 30px 32px;
		}

		.time-item {
			width: 100%;
			height: 114px;
			border-radius: 6px;

			&:nth-of-type(1) {
				background: linear-gradient(180deg, #7535FF 0%, #BA7DFF 100%);
				box-shadow: 0px 2px 10px 0px #5320C1;

			}

			&:nth-of-type(2) {
				background: linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);
				box-shadow: 0px 2px 10px 0px #1F6BBD;
			}

			&:nth-of-type(3) {
				background: linear-gradient(180deg, #098CB6 0%, #47DEFF 100%);
				box-shadow: 0px 2px 10px 0px #138A93;
			}

			.time-title {
				font-size: 18px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 25px;
				padding: 10px 20px 18px;
			}

			.time {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;
			}

			.time-num {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 4px;
				width: 35px;
				height: 37px;
				background: #0E3292;
				font-size: 22px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.header-top {
			font-size: 30px;
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 36px;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
			margin-bottom: 20px;
		}

		.web-headeer {
			font-size: 70px;
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 84px;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
			margin-bottom: 70px;
		}

		.subheader {
			font-size: 18px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 25px;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
		}

		.notice-cont {
			padding-bottom: 60px;
		}

		.notice {
			width: @contWidth;
			margin: 0 auto;
		}

		.block-title {
			padding: 34px 0 22px;
			display: flex;
			align-items: center;
			position: relative;
			width: 100%;
		}

		.title-center {
			justify-content: center;
		}

		.title-icon {
			width: 30px;
			height: 30px;
			margin: 0 13px;
			background: url(../assets/img/home_title_icon.png)no-repeat;
			background-size: 100% 100%;
		}

		.title-name {
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			line-height: 27px;
		}

		.getMore {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			cursor: pointer;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
		}

		.notice-box {
			display: flex;
		}

		.notice-list {
			width: 50%;
			margin-right: 20px;

		}

		.notice-bg {
			height: calc(100% - 90px);
			min-height: 360px;
			padding: 10px 20px;
			background-color: #f5f5f5;
		}

		.notice-swiper {
			width: calc(50% - 20px);
			// height: 300px;
			// background-color: #ccc;
		}

		.notice-item {
			display: flex;
			align-items: center;
			padding: 20px 32px 20px 22px;
			// margin-bottom: 20px;
			cursor: pointer;

		}

		.has-shadow {
			margin-bottom: 20px;
			box-shadow: 0px 12px 12px 0px rgba(176, 176, 176, 0.5);
		}

		.has-border {
			border-bottom: 1px solid #ccc;
		}

		.notice-item-time {
			width: 110px;
			padding: 0 14px 0 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			&:before {
				display: block;
				content: "";
				width: 2px;
				height: 50px;
				background-color: #999;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.notice-item-day {
			font-size: 25px;
			font-weight: bold;
		}

		.notice-item-title {
			padding: 0 16px;
			display: block;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 22px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
		}

		.notice-time {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E8E8E8;
			padding-bottom: 18px;

			span {
				font-size: 10px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #000000;
			}
		}

		.notice-time-hint {
			padding: 2px 4px;
			background: rgba(0, 135, 255, 0.1);
			font-size: 10px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #0087FF;
			margin-right: 8px;
		}

		.has-bg {
			// background-color: #f7f2e7;
		}

		.bulletin-item {
			position: relative;
			padding: 16px 0 16px 20px;
			cursor: pointer;

			&:before {
				display: block;
				content: "";
				width: 18px;
				height: 18px;
				border-radius: 18px;
				background-color: #138cdf;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.item-first {
			display: flex;
			align-items: center;

			.item-img {
				width: 100px;
				margin-right: 16px;
			}

			.item-cont {
				flex: 1;
			}

			.item-time {
				margin: 8px 0;
				color: #999;
				font-size: 14px;
				padding: 0 16px;
			}
		}

		.study-banner {
			width: 100%;
			background: url(../assets/img/home_banner2.png)no-repeat;
			background-size: 100%;
		}

		.study-banner-cont {
			width: @contWidth;
			margin: 0 auto;
			height: 146px;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.study-title {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		.study-title-icon {
			width: 30px;
			height: 30px;
			margin: 0 13px;
			background: url(../assets/img/home_title_icon.png)no-repeat;
			background-size: 100% 100%;
		}

		.study-banner-name {
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 27px;
		}

		.study-subheader {
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		.study-more {
			position: absolute;
			top: 22px;
			right: 0;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			cursor: pointer;
		}

		.study-list {
			width: @contWidth;
			padding: 62px 0 50px;
			margin: 0 auto;
		}

		.study-list-cont {


			display: flex;
			flex-wrap: wrap;
		}

		.lesson-item {
			width: 265px;
			cursor: pointer;

			&:not(:nth-of-type(5n)) {
				margin-right: 15px;
			}

		}

		.lesson-img {
			position: relative;
			height: 145px;
			border-radius: 6px;
			overflow: hidden;
		}

		.lesson-tags {
			position: absolute;
			z-index: 99;
			top: 9px;
			left: 0;
			width: 100%;
			padding: 0 6px;
			display: flex;
			justify-content: flex-end;
		}

		.lesson-tag {
			padding: 2px 3px;
			margin: 0 2px;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
		}

		.lesson-tag-search {
			background: #C8C8C8;
			color: #000;
		}

		.lesson-type-cost {
			color: #E02020;
			background: #FFA9A9;
		}

		.lesson-cont {
			padding: 13px 8px;
		}

		.lesson-title {
			width: 100%;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 12px;
		}

		.lesson-initro {
			display: flex;
			justify-content: space-between;
		}

		.lesson-types {
			display: flex;
			align-items: center;
		}

		.types-item {
			margin-right: 12px;
			display: flex;
			align-items: center;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
		}

		.el-rate__icon {
			margin-right: 0px;
		}




		.teacher {
			padding: 46px 0 60px;
			// background-color: #1249b0;
		}

		.teacher-cont {
			width: @contWidth;

			margin: 0 auto;
		}

		.teacher-list {
			background-color: #f5f5f5;
			padding: 76px 20px 40px;

		}

		.teacher-swiper-item {
			display: flex;
			flex-wrap: wrap;
		}

		.teacher-item {
			position: relative;
			width: 228px;
			height: 251px;
			background: #FFFFFF;
			border-radius: 5px;
			padding-top: 64px;
			transition: all 0.5s;
			margin: 15px 15px 60px;

			&:hover {
				transform: scale(1.1);
			}
		}

		.teacher-avanar {
			width: 84px;
			height: 84px;
			border-radius: 84px;
			overflow: hidden;
			position: absolute;
			top: -42px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			border: 2px solid #fff;
			box-shadow: 0px 6px 10px 0px rgba(117, 53, 255, 0.2);
		}

		.teacher-name {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			text-align: center;
		}

		.teacher-job {
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 20px;
			text-align: center;
			margin-bottom: 44px;
		}

		.teacher-intro {
			padding: 0 25px;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 17px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}

		.image-slot {
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.member-list {
			width: @contWidth;
			margin: 0 auto;
			padding: 40px 20px 0;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			align-items: center;
		}

		.member-item {
			margin: 10px 5px;
			width: 230px;
			border: 1px solid #ccc;
			border-radius: 20px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px 10px;
			cursor: pointer;
			transition: all 0.5s;
			box-shadow: 4px 0 6px 0 #ebebeb;

			&:hover {
				box-shadow: 4px 0 10px 0 #ccc;
			}
		}

		.member-img {
			width: 100%;
			height: 200px;
			margin-bottom: 20px;
		}

		.member-title {
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			text-align: center;
			margin-bottom: 10px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.member-address {
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 20px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.student {
			padding: 20px 0 103px;
		}

		.student-cont {
			width: @contWidth;
			margin: 0 auto;

		}

		.white-color {
			color: #fff;
		}
	}
</style>